<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./turntable.js"></script>
    <link href="https://cdn.bootcss.com/layer/2.4/skin/layer.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script>
    <title>抽奖</title>
    <style>
        body {
            background: url(./images/pcbg.jpg);
            background-size: cover;
        }
        ul,li{
            list-style: none;
            padding: 0
        }
        .mb-15{
            margin-bottom: 15px;
        }
        .tc{
            text-align: center;
        }
        .title {
            color: #fff;
            font-size: 2rem;
            text-align: center;
            font-weight: bold;
            padding: 15px 0;
        }

        .wrap {
            text-align: center;
        }

        .lottery {
            position: relative;
            display: inline-block;
        }

        .lottery img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -76px;
            margin-top: -82px;
            cursor: pointer;
        }

        #message {
            position: absolute;
            top: 0px;
            left: 10%;
        }

        .numBg {
            background: #f5342b;
            color: #fafafa;
            padding: 6px 12px;
            border-radius: 4px;
        }
        #myPrize{
            margin-left: 15px;
        }
        #rules{
            color: #ffb933;
        }
        .layui-layer-rim .layui-layer-content{
            padding: 15px;
        }

        /* pc版样式 */

        @media (min-width: 1200px) {}

        /* 手机版样式 */

        @media (max-width:720px) {
            body {
                background: url(./images/mbg.png);
                background-size: cover;
            }
            #myCanvas {
                width: 100%;
            }
            .lottery img {
                position: absolute;
                width: 70px;
                top: 50%;
                left: 50%;
                margin-left: -35px;
                margin-top: -35px;
                cursor: pointer;
            }
            .wrap{
                padding: 1.5rem 0;
            }
        }
    </style>
    <!--[if lte IE 8]>
        <style>
            .lottery img{
                display: none;
            }   
        </style>
    <![endif]-->
</head>

<body>
    <div class="title">
        幸运大转盘
    </div>
    <div class="tc">
        <span id="rules">规则详情</span>
    </div>
    <div class="wrap">
        <div class="lottery">
            <canvas id="myCanvas" width="600" height="600">
                当前浏览器版本过低，请使用其他浏览器尝试
            </canvas>
            <!-- <p id="message"></p> -->
            <img src="./images/start.png" id="start">
        </div>
    </div>
    <div class="tc">
        <span class="numBg">剩余
            <b class="number"></b> 次
        </span>
        <span id="myPrize" class="numBg">我的奖品</span>
    </div>
    <div id="prizeList" style="display: none">
        <span class="nothing">暂无</span>
        <ul class="tc">
            
        </ul>
    </div>


    <script>
        var wheelSurf;
        var initData;
        var getData=function(){
            //return initData={'aa':'hh'};
        }
        getData()
        //console.log(aa);
        
        // 初始化装盘数据 正常情况下应该由后台返回
        var initData = {
            "title": '幸运大转盘123',
            "number": 3,
            "rules": '规则详情内容啊啊啊规则详情内容啊啊啊规则详情内容啊啊啊规则详情内容啊啊啊规则详情内容啊啊啊规则详情内容啊啊啊规则详情内容啊啊啊规则详情内容啊啊啊',
            "list": [{
                "id": 0,
                "name": "测试文字五六",
                "image": "./images/1.png",
                "rank": 0
            },
            {
                    "id": 1,
                    "name": "测试文字五六七八九",
                    "image": "./images/1.png",
                    "rank": 1,
                    "percent": 100
                },
            {
                "id": 2,
                "name": "1000元京东卡",
                "image": "./images/2.png",
                "rank": 2,
                "percent": 0
            },
            {
                "id": 3,
                "name": "100个比特币",
                "image": "./images/3.png",
                "rank": 3,
                "percent": 0
            },
            {
                "id": 4,
                "name": "50元话费",
                "image": "./images/4.png",
                "rank": 4,
                "percent": 0
            },
            {
                "id": 5,
                "name": "100元话费",
                "image": "./images/5.png",
                "rank": 5,
                "percent": 10
            }
            ]
        }
        //规则详情弹出层
        $('#rules').click(function () {
                layer.open({
                    type: 1,
                    title: '规则详情',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    area: 'auto', //宽高
                    maxWidth:300,
                    content: initData.rules
                });
        })
        //我的奖品点击
        $('#myPrize').click(function () {
            layer.open({
                type: 1,
                title: '我的奖品',
                area: '300px',
                maxWidth: 300,
                skin: 'layui-layer-rim', //加上边框
                shadeClose: true,
                content: $('#prizeList')
            });
        })

        // 计算分配获奖概率(前提所有奖品概率相加100%)
        function getGift() {
            var percent = Math.random() * 100
            var totalPercent = 0
            for (var i = 0, l = initData.list.length; i < l; i++) {
                totalPercent += initData.list[i].percent
                if (percent <= totalPercent) {
                    return initData.list[i]
                }
            }
        }

        var list = {}

        var angel = 360 / initData.list.length
        // 格式化成插件需要的奖品列表格式
        for (var i = 0, l = initData.list.length; i < l; i++) {
            list[initData.list[i].rank] = {
                id: initData.list[i].id,
                name: initData.list[i].name,
                image: initData.list[i].image
            }
        }
        // 查看奖品列表格式

        // 定义转盘奖品
        wheelSurf = $('#myCanvas').WheelSurf({
            list: list, // 奖品 列表，(必填)
            outerCircle: {
                color: '#df1e15' // 外圈颜色(可选)
            },
            innerCircle: {
                color: '#f4ad26' // 里圈颜色(可选)
            },
            dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
            disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
            title: {
                color: '#5c1e08',
                font: '19px Arial'
            } // 奖品标题样式(可选)
        })

        // 初始化转盘
        wheelSurf.init()
        // 抽奖
        $('.title').text(initData.title);//初始化标题
        $('.number').text(initData.number);//初始化抽奖次数
        var throttle = true;
        if (initData.number<=0) {
            var throttle = false;
        }
        $("#start").on('click', function () {
            var time=false;
            if (time) {
                layer.alert('活动已结束', {
                    icon: 5,
                    title: '抱歉'
                });
                return false;
            }

           // var winData = getGift() // 正常情况下获奖信息应该由后台返回
            var winData = initData.list[0];
           $('#prizeList .nothing').hide();
            //$("#message").html('')
            if (!throttle) {
                layer.alert('没有抽奖机会了', {
                    icon: 5,
                    title: '抱歉'
                });
                return false;
            }
            //throttle = false;
            var count = 0
            // 计算奖品角度

            for (const key in list) {
                if (list.hasOwnProperty(key)) {
                    if (winData.id == list[key].id) {
                        break;
                    }
                    count++
                }
            }

            // 转盘抽奖，
            wheelSurf.lottery((count * angel + angel / 2), function () {
                layer.alert('恭喜您获得' + winData.name
                ,{
                    icon: 1,
                    title: '真幸运'
                }
                ,function (index) {
                        console.log('确认按钮回调事件');
                        layer.close(index);
                    }
                );
                var prizeLiHtml='<li class="mb-15">'+ winData.name+'</li>';
                $('#prizeList ul').append(prizeLiHtml);
                console.log(prizeLiHtml);
                initData.number = initData.number - 1;
                $('.number').text(initData.number);
                if (initData.number == 0) {
                    throttle = false;
                }
                console.log(initData.number);
            })
        })


    </script>
</body>

</html>